
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的购物车——小米商城</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				/*border: 1px solid black;*/
			}
			.all {
				width: 100%;
				height: 800px;
			}
			.head {
				width: 1226px;
				height: 102px;
				margin: 0 auto;
			}
			.head .nav{
				width: 1226px;
				margin: 0 auto;
			}
			.head div {
				float: left;
				margin: 0px 10px;
			}
			
			a {
				text-decoration: none;
			}
			
			#logo {
				background-color: #FF6700;
				width: 50px;
				height: 50px;
				line-height: 50px;
				margin: 20px 15px;
			}
			
			#nav-left {
				font-size: 28px;
				line-height: 100px;
				position: relative;
				top: 0px;
			}
			
			#nav-mid span {
				font-size: 15px;
				color: #757575;
				position: relative;
				left: 10px;
				top: 45px;
			}
			
			#nav-right {
				line-height: 100px;
				position: relative;
				left: 450px;
				top: 20px;
			}
			
			#nav-right a {
				color: #757575;
				font-size: 12px;
			}
			#tjdelete {
				position: fixed;
				left: 0px;
				top: 0px;
				z-index: 1000;
				border: 1px solid;
				width: 100%;
				height: 100%;
				background-color: rgba(49, 49, 49, 0.8);
				display: none;
			}
			
			#tjdel {
				position: fixed;
				left: 750px;
				top: 300px;
				z-index: 1000;
				border: 1px solid;
				width: 500px;
				height: 270px;
				background-color: white;
				/*display: none;*/
			}
			
			#tjdel h2 {
				color: #757575;
				height: 150px;
				line-height: 150px;
				text-align: center;
			}
			
			#tjdel>div {
				float: left;
				border: 1px solid;
				color: white;
				font-weight: bold;
				width: 160px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				margin-top: 30px;
			}
			
			#tjdel #yes {
				background-color: #FF6700;
				cursor: pointer;
			}
			
			#tjdel #no {
				background-color: #B0B0B0;
				margin-left: 80px;
				margin-right: 20px;
				cursor: pointer;
			}
			
			#tjdel #yes:hover {
				background-color: #FF4400;
			}
			
			#tjdel #no:hover {
				background-color: #757575;
			}
			
			#tjdelete #close {
				height: 30px;
				width: 30px;
				color: #757575;
				font-size: 18px;
				line-height: 30px;
				text-align: center;
				font-weight: bold;
				border: 0px solid;
				border-radius: 50%;
				position: absolute;
				right: 10px;
				bottom: 220px;
				cursor: pointer;
			}
			
			#tjdelete #close:hover {
				background-color: #DD0C0C;
				color: white;
			}
			
			#tj {
				position: fixed;
				left: 0px;
				top: 0px;
				z-index: 1000;
				border: 1px solid;
				width: 100%;
				height: 100%;
				background-color: rgba(49, 49, 49, 0.8);
				display: none;
				margin:0 auto;
			}
			
			#tj ul {
				position: absolute;
				left: 420px;
				top: 100px;
			}
			
			#tj li {
				float: left;
				list-style-type: none;
				height: 300px;
				width: 235px;
				background-color: white;
				margin: 10% 10px;
			}
			
			#tj li div {
				line-height: 30px;
				font-size: 14px;
				text-align: center;
			}
			
			img {
				text-align: center;
				vertical-align: middle;
			}
			
			#tj .picture {
				margin-top: 50px;
			}
			
			#tj .text {
				color: #333333;
			}
			
			#tj .xuan1 {
				height: 26px;
				width: 26px;
				border-radius: 50%;
				border: 1px solid #E2E2E2;
				margin: 15px;
			}
			.xuanwai{
				height: 26px;
				width: 26px;
				border-radius: 50%;
				border: 1px solid #EF6700;
				margin: 15px;
			}
			#tj .xuan2 {
				height: 20px;
				width: 20px;
				border-radius: 50%;
				margin: 3px;
			}
			
			#tj li:hover .xuan2 {
				background-color: #E2E2E2;
			}
			
			#tj h1 {
				text-align: center;
				color: white;
				margin-top: 80px;
			}
			
			#tj .cost {
				color: #FF6700;
			}
			
			#tj .closs {
				height: 30px;
				width: 30px;
				color: #757575;
				font-size: 18px;
				line-height: 30px;
				text-align: center;
				font-weight: bold;
				border-radius: 50%;
				background-color: #FAFAFA;
				position: absolute;
				right: 200px;
				top: 80px;
				cursor: pointer;
			}
			
			#tj .closs:hover {
				background-color: #DD0C0C;
				color: white;
			}
			
			#tj #shopcar {
				height: 40px;
				width: 160px;
				line-height: 40px;
				background-color: #FF6700;
				color: white;
				font-weight: bold;
				text-align: center;
				position: absolute;
				top: 520px;
				left: 855px;
				cursor:pointer;
			}
			
			#tj #shopcar:hover {
				background-color: #FF4400;
			}
			.body {
				clear: both;
				width: 100%;
				background-color: #F5F5F5;
				border-top: 1px solid #FF6700;
				text-align: center;
				
			}
			
			.body #tab {
				margin: 40px 60px;
				background-color: white;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 20px;
				font-size: 16px;
			}
			
			#tr1 td {
				height: 80px;
				line-height: 80px;
				font-size: 14px;
				border-bottom: 1px solid #E0E0E0;
			}
			
			#tr2 td,
			#tr3 td {
				height: 150px;
				line-height: 150px;
				border-bottom: 1px solid #E0E0E0;
			}
			
			.td1 {
				width: 120px;
			}
			
			#th .td1 div {
				width: 20px;
				height: 20px;
				border: 1px solid #E0E0E0;
				position: relative;
				left: 20px;
				top: 50px;
			}
			
			#tb .td1 div {
				width: 20px;
				height: 20px;
				border: 1px solid #E0E0E0;
				position: relative;
				left: 20px;
			}
			
			.td2 {
				width: 510px;
				font-size: 18px;
				font-weight: 400;
				text-align: left;
				color: #66, 66, 66;
				cursor: pointer;
			}
			
			.td3 {
				width: 100px;
				font-size: 16px;
			}
			
			.td4 {
				width: 240px;
			}
			
			.td4 div {
				width: 149px;
				height: 40px;
				line-height: 40px;
				border: 1px solid #E0E0E0;
				text-align: center;
				margin-left: auto;
				margin-right: auto;
			}
			
			.td4 span {
				padding: 13px 10px;
				color: #757575;
				cursor: pointer;
			}
			
			.td4 span:hover {
				background-color: #E0E0E0;
			}
			
			.td4 input {
				outline: none;
				padding: 10px 10px;
				outline: none;
				border: 0px solid;
				text-align: center;
				font-size: 14px;
			}
			
			.td5 {
				width: 120px;
				font-size: 16px;
				color: #FF6700;
			}
			
			.td6 {
				width: 100px;
			}
			
			.td6 span {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				color: #757575;
				font-weight: bold;
				font-size: 20px;
				padding: 1px 7px;
				cursor: pointer;
			}
			
			.td6 span:hover {
				color: white;
				background-color: #DD0C0C;
			}
			
			.bfoot {
				margin-top: 10px;
				width: 1190px;
				height: 50px;
				margin-left: auto;
				margin-right: auto;
			}
			
			.bfoot div {
				width: 1190px;
				background-color: white;
				float: left;
				height: 50px;
				line-height: 50px;
			}
			
			#ba {
				width: 100px;
				color: #E0E0E0;
			}
			
			#ba a {
				color: #757575;
				padding: 0px 10px;
				font-size:12px;
			}
			
			#ba a:hover {
				color: #FF4400;
			}
			
			#bbb {
				width: 570px;
			}
			
			#bc {
				width: 140px;
				color: #FF6700;
			}
			
			#bd {
				width: 180px;
				color: #FF6700;
				font-size: 28px;
			}
			
			#be {
				width: 200px;
				background-color: #FF6700;
				color: white;
				font-size: 18px;
				font-weight: bold;
				cursor: pointer;
			}
			
			#be:hover {
				background-color: #FF4400;
			}
			
			.add {
				width: 1190px;
				background-color: white;
				margin-left: auto;
				margin-right: auto;
			}
			
			.add div {
				border-bottom: 1px solid #F5F5F5;
				height: 50px;
				line-height: 50px;
				text-align: left;
				font-size: 14px;
			}
			
			.add .add1 {
				color: white;
				font-size: 20px;
				font-weight: bold;
				padding: 1px 7px;
				border-radius: 50%;
				background-color: #FF6700;
				cursor: pointer;
				margin-left: 20px;
			}
			
			.add .add2 {
				padding: 15px 10px;
				padding-right: 900px;
				cursor: pointer;
			}
			
			.shop {
				clear: both;
				background-color: #F5F5F5;
			}
			
			#sbody {
				width: 1200px;
				height: 620px;
				margin-left: auto;
				margin-right: auto;
				padding-top: 10px;
			}
			
			#sbody li {
				width: 230px;
				height: 300px;
				background-color: white;
				float: left;
				list-style-type: none;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
				margin: 0px 5px;
				margin-top: 10px;
				cursor: pointer;
			}
			
			#sbody .text {
				color: #333333;
			}
			
			#sbody .cost {
				color: #FF6700;
			}
			
			.jia {
				color: #757575;
			}
			
			#sbody .jia div {
				width: 124px;
				margin-left: auto;
				margin-right: auto;
				font-size: 14px;
				cursor: pointer;
			}
			
			#sbody .picture {
				margin-top: 50px;
			}
			
			#sbody li:hover .jia div {
				border: 1px solid #FF6700;
			}
			
			.hover {
				background-image: url(img/select.hover.png);
			}
			
			.active {
				background-image: url(img/select.active.png);
				border: 1px solid #FF6700;
			}
			
			.sover {
				color: #FFFFFF;
				background-color: #FF6700;
			}
			
			.over {
				color: #FF6700;
			}
			
			.out {
				color: #757575;
			}
			
			.tjactive {
				height: 20px;
				width: 20px;
				border-radius: 50%;
				margin: 3px;
				background-color: #FF6700;
			}
			
			.tjhover {
				height: 20px;
				width: 20px;
				border-radius: 50%;
				margin: 3px;
				background-color: #E2E2E2;
			}
			.tjhover1 {
				height: 26px;
				width: 26px;
				border-radius: 50%;
				margin: 3px;
				border: 1px solid #E2E2E2;
			}
			
			#shead #xian {
				height: 50px;
				border-bottom: 1px solid #B0B0B0;
			}
			
			#shead p {
				text-align: center;
				position: relative;
				width: 400px;
				margin-left: auto;
				margin-right: auto;
				background-color: #F5F5F5;
				bottom: 20px;
				left: 0px;
				color: #757575;
				font-size: 30px;
			}
			/*尾部*/
			.foot{
				background-color: #FAFAFA;
				height: 438px;
			}
			.foot .foot-top{
				background-color: white;
				height: 272px;
			}
			.foot .foot1{
				width: 1226px;
				margin: 0 auto;
				height: 79px;
				border-bottom: 1px solid #E0E0E0;
			}
			.foot .foot1 li{
				font-size: 16px;
				float: left;
				list-style: none;
				padding-left: 60px;
				padding-right: 24px;
				color: #616161;
				line-height: 79px;
				height: 79px;
			}
			.foot .foot1 li span{
				font-size: 25px;
				padding-left: 58px;
				color: #E0E0E0;
			}
			.foot .foot2{
				width: 1226px;
				height: 187px;
				margin: 0 auto;
				margin-top: 40px;
			}
			.foot .foot2-l{
				clear: both;
			}
			.foot .foot2-l dl{
				float: left;
				width: 150px;
				margin-left: 10px;
			}
			.foot .foot2-l dl dt{
				margin-bottom: 20px;
				color: #424242;
			}
			.foot .foot2-l dl dd{
				color: #757575;
				line-height: 30px;
				font-size: 12px;
			}
			.foot .foot2>div{
				float: left;
			}
			.foot .foot2r{
				width: 133px;
				height: 147px;
				margin-left: 13px;
				padding-left: 62px;
				padding-right: 57px;
				border-left: 1px solid #E0E0E0;
			}
			.foot .fp1{
				font-size: 20px;
				color: #EF6700;
				text-align: center;
				line-height: 25px;
				width: 150px;
			}
			.foot .fp2{
				font-size: 12px;
				color: #616161;
				text-align: center;
				line-height: 18px;
			}
			.foot .fp3{
				height: 28px;
				width: 118px;
				line-height: 28px;
				text-align: center;
				border: 1px solid #EF6700;
				margin: 0 auto;
				margin-top: 16px;
				color: #EF6700;
				font-size: 12px;
			}
			.foot .fp3:hover{
				background-color: #EF6700;
				color: white;
				cursor: pointer;
			}
			.foot .foot-bottom{
				width: 1226px;
				height: 106px;
				padding: 30px 0;
				margin: 0 auto;
			}
			.foot .foot-bottom>div{
				float: left;
			}
			.foot .fl{
				width: 57px;
				height: 57px;
				margin-right: 10px;
				background-image: url(img/logo-footer.png);
				background-position: center;
				background-repeat: none;
			}
			.foot .fm{
				font-size: 12px;
				line-height: 18px;
			}
			.foot .fmp1,.fmp1 a{
				color: #757575;
				text-decoration: none;
			}
			.foot .fm a:hover{
				color: #EF6700;
			}
			.foot .fmp2,.fmp2 a{
				text-decoration: none;
				color: #B0B0B0;
			}
			.foot .fr{
				margin-left: 750px;
				margin-top: -50px;
			}
			.foot .fs{
				width: 267px;
				height: 19px;
				margin: 30px 479.5px 0 479.5px;
				margin: 0 auto;
				color: #333333;
				position: relative;
			}
			.foot .fs img{
				position: absolute;
				top: -50px;
			}
			
			
			
			.phone li{
				width: 200px;
				line-height:30px ;
				text-align: center;
			}
			.phone #boder{
				border: 1px solid #FF6700;
				color: #FF6700;
				width: 110px;
				margin-left: auto;
				margin-right: auto;
			}
			#boder:hover{
				background-color: #FF6700;
				color: white;
				cursor: pointer;
			}
			#j-j{
				width: 137px;
			}
			
			#bbb{
				color: #777;
    			font-size: 14px;
			}
		</style>
	</head>

	<body>
		<div class="all">
			
			<div class="head">
				<div class="nav">
					<div id="logo">
						<img src="img/mi-logo.png" />
					</div>
					<div id="nav-left">
						<p>我的购物车</p>
					</div>
					<div id="nav-mid">
						<span>温馨提示:产品是否购买成功，以最终下单为准哦，请尽快结算</span>
					</div>
					<div id="nav-right">
						<a href="----小米登陆页面.html">登录</a> |
						<a href="----小米注册页面.html">注册</a>
					</div>
				</div>
			</div>
			<div class="body">
				<div class="carmain">
					<table id="tab" border="0" cellspacing="0" cellpadding="0">
						<thead id="th">
							<tr id="tr1">
								<td class="td1">
									<div id="quanxuan"></div>全选
								</td>
								<td class="td2">商品名称</td>
								<td class="td3">单价</td>
								<td class="td4">数量</td>
								<td class="td5">小计</td>
								<td class="td6">操作</td>
							</tr>
						</thead>
						<tbody id="tb">
							<tr id="tr2">
								<td class="td1">
									<div></div>
								</td>
								<td class="td2"><img src="img/pms_1500287084.72131750!80x80.jpg" align="center" />
								<span style="font-size: 14px;">	
									小米电视4A 32英寸 黑色 32英寸
								</span>
								</td>
								<td class="td3">1099</td>
								<td class="td4">
									<div id="j-j">
										<span id="left" onclick="jian(this)">-</span><input type="text" value="1" size="4" onblur="xiaoji(this)" /><span id="right" onclick="jia(this)">+</span>
									</div>
								</td>
								<td class="td5">1099</td>
								<td class="td6"><span onclick="dele(this)">×</span></td>
							</tr>
							<tr id="tr3">
								<td class="td1">
									<div></div>
								</td>
								<td class="td2"><img src="img/pms_1490088811.16427079!80x80.jpg" align="center" />
								<span style="font-size: 14px;">	
									小米MIX 全网通 4GB内存＋128GB容量 黑色
								</span></td>
								<td class="td3">3499</td>
								<td class="td4">
									<div id="j-j">
										<span id="left" onclick="jian(this)">-</span><input type="text" value="1" size="4" onblur="xiaoji(this)" /><span id="right" onclick="jia(this)">+</span>
									</div>
								</td>
								<td class="td5">3499</td>
								<td class="td6"><span onclick="dele(this)">×</span></td>
							</tr>
							
						</tbody>
					</table>
				</div>
				<div id="tjdelete">
				<div id="tjdel">
					<div onclick="closedele(this)" id="close">×</div>
					<h2>删除此产品吗？</h2>
					<div id="no">
						取消
					</div>
					<div id="yes">
						确定
					</div>
				</div>
			</div>
			<div id="tj">
				<h1>选择商品</h1>
				<div class="closs" onclick="closeshow(this)">×</div>
				<ul id="ul">
					<li id="tj1">
						<div class="xuan1">
							<div class="xuan2"></div>
						</div>
						<div class="picture">
							<img width="120px"src="img/pms_1482321199.12589253!220x220.jpg" align="center" />
						</div>
						<div class="text">
							小米活塞耳机 清新版 黑色
						</div>
						<div class="cost">
							25
						</div>
					</li>
					<li id="tj2">
						<div class="xuan1">
							<div class="xuan2"></div>
						</div>
						<div class="picture">
							<img width="120px" src="img/pms_1482321205.78014235!220x220.jpg" align="center" />
						</div>
						<div class="text">
							小米活塞耳机 清新版 银色
						</div>
						<div class="cost">
							25
						</div>
					</li>
					<li id="tj3">
						<div class="xuan1">
							<div class="xuan2"></div>
						</div>
						<div class="picture">
							<img width="120px" src="img/pms_1482321212.47485716!220x220.jpg" align="center" />
						</div>
						<div class="text">
							小米活塞耳机 清新版 紫色
						</div>
						<div class="cost">
							25
						</div>
					</li>
					<li id="tj4">
						<div class="xuan1">
							<div class="xuan2"></div>
						</div>
						<div class="picture">
							<img width="120px" src="img/pms_1482321209.75977825!220x220.jpg" align="center" />
						</div>
						<div class="text">
							小米活塞耳机 清新版 粉色
						</div>
						<div class="cost">
							25
						</div>
					</li>
				</ul>
				<div id="shopcar" onclick="tjaddtr(this)">
					加入购物车
				</div>
			</div>
				<div class="add" id="addtr">
					<div><span class="add1" onclick="addtr1()">+</span> <span class="add2" onclick="tjc(this)">25元得小米活塞耳机</span></div>
					<div><span class="add1" onclick="addtr2()">+</span> <span class="add2" onclick="tjc(this)">25元得小米活塞耳机</span></div>
				</div>
				<div class="bfoot">
					<div id="ba">
						<a href="index.html">继续购物</a>|
					</div>
					<div id="bbb">
						共<span style="color: #FE6700;">0</span>件商品，已选择<span style="color: #FE6700;">0</span>件
					</div>
					<div id="bc">
						合计(不含运费)：
					</div>
					<div id="bd">

					</div>
					<div id="be">去结算
					</div>
				</div>
			</div>
			<div class="shop">
				<div id="shead">
					<div id="xian">
					</div>
					<p>买购物车中商品的人还买了</p>
				</div>
				<div id="sbody">
					<ul>
						<li>
							<div class="picture" style="margin-top: 0px;">
								<img width="230px" height="300px" src="img/gouwuche!234x300.jpg" />
							</div>
						</li>
						<li>
							<div class="picture">
								<img width="120px" src="img/pms_1490088823.14341375!140x140.jpg" />
							</div>
							<div class="text">
								小米5c 移动版 3GB内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
									1.9万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img width="120px" src="img/pms_1490088823.14341375!140x140.jpg" />
							</div>
							<div class="text">
								小米5c 移动版 3GB内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
									1.9万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img width="120px" src="img/pms_1490088823.14341375!140x140.jpg" />
							</div>
							<div class="text">
								小米5c 移动版 3GB内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
									1.9万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img width="120px" src="img/pms_1490088823.14341375!140x140.jpg" />
							</div>
							<div class="text">
								小米5c 移动版 3GB内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
									1.9万人好评
								</div>
							</div>
						</li>
					</ul>
					<ul>
						<li>
							<div class="picture">
								<img width="120px" src="img/pms_1490088823.14341375!140x140.jpg" />
							</div>
							<div class="text">
								小米5c 移动版 3GB内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
									1.9万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img width="120px" src="img/pms_1490088823.14341375!140x140.jpg" />
							</div>
							<div class="text">
								小米5c 移动版 3GB内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
									1.9万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img width="120px" src="img/pms_1490088823.14341375!140x140.jpg" />
							</div>
							<div class="text">
								小米5c 移动版 3GB内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
									1.9万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img width="120px" src="img/pms_1490088823.14341375!140x140.jpg" />
							</div>
							<div class="text">
								小米5c 移动版 3GB内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
									1.9万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img width="120px" src="img/pms_1490088823.14341375!140x140.jpg" />
							</div>
							<div class="text">
								小米5c 移动版 3GB内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
									1.9万人好评
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="foot">
				<div class="foot-top">
					<div class="foot1">
						<ul>
							<li>预约维修服务<span>|</span></li>
							<li>7天无理由退货<span>|</span></li>
							<li>15天免费换货<span>|</span></li>
							<li>满150元包邮<span>|</span></li>
							<li>520余家售货网点</li>
						</ul>
					</div>
					<div class="foot2">
						<div class="foot2-l">
							<dl>
								<dt>帮助中心</dt>
								<dd>账户管理</dd>
								<dd>购物指南</dd>
								<dd>订单操作</dd>
							</dl>
							<dl>
								<dt>服务支持</dt>
								<dd>售后政策</dd>
								<dd>自助服务</dd>
								<dd>相关下载</dd>
							</dl>
							<dl>
								<dt>线下门店</dt>
								<dd>小米之家</dd>
								<dd>服务网点</dd>
								<dd>零售网点</dd>
							</dl>
							<dl>
								<dt>关于小米</dt>
								<dd>了解小米</dd>
								<dd>加入小米</dd>
								<dd>联系我们</dd>
							</dl>
							<dl>
								<dt>关注我们</dt>
								<dd>新浪微博</dd>
								<dd>小米部落</dd>
								<dd>官方微信</dd>
							</dl>
							<dl>
								<dt>特色服务</dt>
								<dd>F码通道</dd>
								<dd>礼物码</dd>
								<dd>防伪查询</dd>
							</dl>
						</div>
						<div class="foot2r">
							<p class="fp1">400-100-5678</p>
							<p class="fp2">周一至周日 8:00-18:00</p>
							<p class="fp2">（仅收市话费）</p>
							<p class="fp3">24小时在线客服</p>
						</div>
					</div>
				</div>
				<div class="foot-bottom">
					<div class="fl">
						
					</div>
					<div class="fm">
						<p class="fmp1"><a href="#">小米商城</a> <span>|</span> <a href="#">MIUI</a> <span>|</span> <a href="#">米聊</a> <span>|</span> <a href="#">多看书城</a> <span>|</span> <a href="#">小米路由器</a> <span>|</span> <a href="#">视频电话</a> <span>|</span> <a href="#">小米天猫店</a> <span>|</span> <a href="#">小米淘宝直营店</a> <span>|</span> <a href="#">小米网盟</a> <span>|</span> <a href="#">小米移动</a> <span>|</span> <a href="#">隐私政策</a> <span>|</span> <a href="#">Select Region</a></p>
						<p class="fmp2">&copy;<a href="#">mi.com</a> 京ICP证110507号 <a href="#">京ICP备10046444号</a> <a href="#">京公网安备11010802020134号</a> <a href="#">京网文[2014]0059-0009号</a> </p>
						<p class="fmp2">违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
					</div>
					<div class="fr">
						<a href="#"><img width="85" height="28px" src="img/truste.png"/></a><a href="#"><img src="img/v-logo-2.png"/></a><a href="#"><img src="img/v-logo-1.png"/></a><a href="#"><img src="img/v-logo-3.png"/></a>
					</div>
					
				</div>
				<div class="fs">
					<!--<img src="img/2017-08-15_085552.png"/>-->
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var tbody = document.getElementById("tb");
			var trs = tbody.getElementsByTagName("tr");
			//复选框
			function fuxuan() {
				for(var i = 0; i < trs.length; i++) {
					trs[i].firstElementChild.firstElementChild.onmouseover = function() {
						if(this.className != "active") {
							this.className = "hover";
						}
					}
					trs[i].firstElementChild.firstElementChild.onmouseout = function() {
						if(this.className == "hover") {
							this.className = ""
						}
					}
					var x = 0;
					trs[i].firstElementChild.firstElementChild.onclick = function() {
						if(this.className != "active") {
							this.className = "active";
							zj();
						} else {
							this.className = "";
							zj();
						}
					}
				}
			}
			fuxuan();
			//全选
			var all = document.getElementById("quanxuan");
			all.onclick = function() {
				if(this.className != "active") {
					this.className = "active";
				} else {
					this.className = "";
				}
				if(this.className == "active") {
					for(var i = 0; i < trs.length; i++) {
						trs[i].firstElementChild.firstElementChild.className = "active";
						zj();
					}
				} else {
					for(var i = 0; i < trs.length; i++) {
						trs[i].firstElementChild.firstElementChild.className = "";
						zj();
					}
				}
			}
			
			zongji1();
			function zongji1(){
				var ling=0;
				for (var i = 0; i <trs.length; i++) {
					if(trs[i].firstElementChild.firstElementChild.className == "active"){
						ling+=trs[i].children[3].children[0].children[1].value;
						console.log(trs[i].children[3].children[0].children[1].value)
					}
				}
			}
			//小计
			function xiaoji(t) {
				var num = t.value;
				var dj = t.parentElement.parentElement.parentElement.children[2].innerHTML;
				var xj = num * dj;
				var xiaoji = t.parentElement.parentElement.parentElement.children[4];
				xiaoji.innerHTML = xj;
				zj();
			}
			//总计
			function zj() {
				var sum = 0;
				for(var i = 0; i < trs.length; i++) {
					var choose = trs[i].firstElementChild.firstElementChild;
					if(choose.className == "active") {
						sum += parseFloat(trs[i].children[4].innerHTML);
					}
				}
				document.getElementById("bd").innerHTML = sum;
			}
			zj();
			//jia jian
			function jian(jian) {
				var m = jian.parentElement.children[1].value;
				m--;
				if(m >= 0) {
					jian.parentElement.children[1].value = m;
					xiaoji(jian.parentElement.children[1]);
				}
			}

			function jia(jia) {
				var m = jia.parentElement.children[1].value;
				m++;
				jia.parentElement.children[1].value = m;
				xiaoji(jia.parentElement.children[1]);
			}
			//关闭删除弹窗
			function closedele() {
				document.getElementById("tjdelete").style.display = "none";
			}

			function dele(de) {
				function opendele() {
				document.getElementById("tjdelete").style.display = "block";
				//yes
				var yes = document.getElementById("yes");
				yes.onclick = function() {
					tbody.removeChild(de.parentElement.parentElement);
					zj();
					closedele();
				}
				//no
				var no = document.getElementById("no");
				no.onclick = function() {
					closedele();
				}
			}
				opendele();
			}
			//添加
			var tj1 = document.getElementById("tj1");
			var tj2 = document.getElementById("tj2");
			//将弹窗内容直接通过加号加到购物车
//			function addtr1() {
//				var tr = document.createElement("tr");
//				var td1 = document.createElement("td");
//				td1.innerHTML = "<div onclick='fuxuan()' onmousedown='zj()'></div>";
//				td1.className = "td1";
//				var td2 = document.createElement("td");
//				td2.innerHTML = tj1.children[1].innerHTML + tj1.children[2].innerHTML;
//				td2.className = "#tb td2";
//				var td3 = document.createElement("td");
//				td3.innerHTML = tj1.children[3].innerHTML;
//				td3.className = "td3";
//				var td4 = document.createElement("td");
//				td4.innerHTML = '<div id=""><span id="left" onclick="jian(this)">-</span><input type="text" value="1" size="4" onblur="xiaoji(this)" /><span id="right" onclick="jia(this)">+</span></div>';
//				td4.className = "td4";
//				var td5 = document.createElement("td");
//				td5.innerHTML = tj1.children[3].innerHTML;
//				td5.className = "td5";
//				var td6 = document.createElement("td");
//				td6.innerHTML = "<span onclick='dele(this)'>×</span>";
//				td6.className = "td6";
//				tbody.appendChild(tr);
//				tr.appendChild(td1);
//				tr.appendChild(td2);
//				tr.appendChild(td3);
//				tr.appendChild(td4);
//				tr.appendChild(td5);
//				tr.appendChild(td6);
//			}

			function addtr2() {
				var tr = document.createElement("tr");
				var td1 = document.createElement("td");
				td1.innerHTML = "<div  onclick='fuxuan()' onmousedown='zj()'></div>";
				td1.className = "td1";
				var td2 = document.createElement("td");
				td2.innerHTML = tj2.children[1].innerHTML + tj2.children[2].innerHTML;
				td2.className = "#tb td2";
				var td3 = document.createElement("td");
				td3.innerHTML = tj2.children[3].innerHTML;
				td3.className = "td3";
				var td4 = document.createElement("td");
				td4.innerHTML = '<div id=""><span id="left" onclick="jian(this)">-</span><input type="text" value="1" size="4" onblur="xiaoji(this)" /><span id="right" onclick="jia(this)">+</span></div>';
				td4.className = "td4";
				var td5 = document.createElement("td");
				td5.innerHTML = tj2.children[3].innerHTML;
				td5.className = "td5";
				var td6 = document.createElement("td");
				td6.innerHTML = "<span onclick='dele(this)'>×</span>";
				td6.className = "td6";
				tbody.appendChild(tr);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);
				tr.appendChild(td6);
			}
			//将下面的商品添加到购物车
			function addtr(add) {
				var tr = document.createElement("tr");
				var td1 = document.createElement("td");
				td1.innerHTML = "<div  onclick='fuxuan()' onmousedown='zj()'></div>";
				td1.className = "td1";
				var td2 = document.createElement("td");
				td2.innerHTML = add.parentElement.parentElement.children[0].innerHTML + add.parentElement.parentElement.children[1].innerHTML;
				td2.className = "#tb td2";
				var td3 = document.createElement("td");
				td3.innerHTML = add.parentElement.parentElement.children[2].innerHTML;
				td3.className = "td3";
				var td4 = document.createElement("td");
				td4.innerHTML = '<div id=""><span id="left" onclick="jian(this)">-</span><input type="text" value="1" size="4" onblur="xiaoji(this)" /><span id="right" onclick="jia(this)">+</span></div>';
				td4.className = "td4";
				var td5 = document.createElement("td");
				td5.innerHTML = add.parentElement.parentElement.children[2].innerHTML;
				td5.className = "td5";
				var td6 = document.createElement("td");
				td6.innerHTML = "<span onclick='dele(this)'>×</span>";
				td6.className = "td6";
				tbody.appendChild(tr);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);
				tr.appendChild(td6);
			}
			var sbody = document.getElementById("sbody");
			var lis = sbody.getElementsByTagName("li");
			for(var i = 0; i < lis.length; i++) {
				lis[i].onmouseover = function() {
					sty = this.children[3].firstElementChild.innerHTML;
					if(this.className != "over") {
						this.className = "over";
						this.children[3].firstElementChild.innerHTML = "加入购物车";
					} else {
						sov(this.children[3].firstElementChild);
					}
					return sty;
				}
				lis[i].onmouseout = function() {
					if(this.className == "over") {
						this.className = "out";
						this.children[3].firstElementChild.innerHTML = sty;
						sou(this.children[3].firstElementChild);
					}

				}
			}

			function sov(so) {
				if(so.className != "sover") {
					so.className = "sover";
				} else if(so.className == "sover") {
					so.className = "over";
				}
			}

			function sou(su) {
				if(su.className == "sover") {
					su.className = "over";
				} else if(su.className != "sover") {
					su.className = "out";
				}
			}
			//打开弹窗
			function tjc(t) {
				document.getElementById("tj").style.display = "block";
			}
			//关闭弹窗
			function closeshow(c) {
				document.getElementById("tj").style.display = "none";
			}
			//弹框的功能
			var ul = document.getElementById("ul");
			var tjli = ul.getElementsByTagName("li")
			for(var i = 0; i < tjli.length; i++) {
				tjli[i].onmouseover = function() {
					if(this.children[0].firstElementChild.className != "tjactive") {
						this.children[0].firstElementChild.className = "tjhover";
					}
				}
				tjli[i].onmouseout = function() {
					if(this.children[0].firstElementChild.className == "tjhover") {
						this.children[0].firstElementChild.className = "";
					}
				}
				tjli[i].onclick = function() {
					for (var i = 0; i < tjli.length; i++) {
						tjli[i].children[0].children[0].className="tjhover"
						tjli[i].children[0].className="xuan1"
					}
					if(this.firstElementChild.children[0].className != "tjactive") {
						this.firstElementChild.children[0].className = "tjactive";
//						this.style.borderColor = "#FF6700";
						this.children[0].className="xuanwai"
					} else {
						this.firstElementChild.children[0].className = "";
						this.children[0].style.borderColor = "#E2E2E2";
					}
				}
			}
			var shopcar = document.getElementById("shopcar")
			shopcar.onclick = function() {
				for(var i = 0; i < tjli.length; i++) {
					var xuan = tjli[i].firstElementChild.firstElementChild;
					if(xuan.className == "tjactive") {
						//将弹窗中的产品添加到购物车
						function tjaddtr() {
							var tr = document.createElement("tr");
							var td1 = document.createElement("td");
							td1.innerHTML = "<div  onclick='fuxuan()' onmousedown='zj()'></div>";
							td1.className = "td1";
							var td2 = document.createElement("td");
							td2.innerHTML = tjli[i].children[1].innerHTML + tjli[i].children[2].innerHTML;
							td2.className = "#tb td2";
							var td3 = document.createElement("td");
							td3.innerHTML = tjli[i].children[3].innerHTML;
							td3.className = "td3";
							var td4 = document.createElement("td");
							td4.innerHTML = '<div id=""><span id="left" onclick="jian(this)">-</span><input type="text" value="1" size="2" onblur="xiaoji(this)" /><span id="right" onclick="jia(this)">+</span></div>';
							td4.className = "td4";
							var td5 = document.createElement("td");
							td5.innerHTML = tjli[i].children[3].innerHTML;
							td5.className = "td5";
							var td6 = document.createElement("td");
							td6.innerHTML = "<span onclick='dele(this)'>×</span>";
							td6.className = "td6";
							tbody.appendChild(tr);
							tr.appendChild(td1);
							tr.appendChild(td2);
							tr.appendChild(td3);
							tr.appendChild(td4);
							tr.appendChild(td5);
							tr.appendChild(td6);
						}
						tjaddtr();
					}
				}
				closeshow(this.parentElement);
			}
		</script>
	</body>

</html>